<template>
  <div class="main">
    <div class="loginbox">
      <div>
        <el-image
            :src="require('@/assets/img/login-button.png')"
            fit="fill"></el-image>
      </div>
      <div style="position: absolute; right: 200px; top: 200px">
        <div style="font-size: 24px; font-weight: bold; margin-bottom: 20px">欢迎登录</div>
        <el-form
            class="fom"
            :rules="rules"
            ref="ruleForm"
            :model="formData"
            size="medium"
            style="margin-bottom: 30px">
          <el-form-item prop="user">
            <el-input
                prefix-icon="el-icon-user"
                placeholder="请输入用户名"
                class="mb10 int"
                size="medium"
                v-model="formData.user"
                @keyup.enter.native="login"></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
                type="password"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                class="mb10 int"
                size="medium"
                v-model="formData.pass"
                @keyup.enter.native="login"></el-input>
          </el-form-item>
        </el-form>

        <DragVerify
            :options="options"
            :disabled="disabledVcode"
            :isLoadVcode="isLoadVcode"
            :isVerify="isVerify"
            @refresh="refreshVcode"
            @submit="submit"></DragVerify>

        <div style="margin-top: 30px">
          <el-button type="primary" size="medium" class="btn" @click="login()" :loading="btnloading">登录</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {setCookie} from '@/utils/auth'
import {arrCut, arrFilter} from '@/utils'
import DragVerify from "@/components/DragVerify";
import {get_loginUserInfo} from '@/apis/user/userApi'
import {get_loginPic, checkcapcode, userLogin, getUserMenu} from "@/apis/login/LoginApi";

export default {
  components: {DragVerify},
  data() {
    return {
      formData: {
        user: "",
        pass: "",
      },
      rules: {
        user: [{required: true, message: "请输入用户名称", trigger: "blur"}],
        pass: [{required: true, message: "请输入登录密码", trigger: "blur"}],
      },
      id: "",
      options: {
        backImage: "",
        slidingImage: "",
        yHeight: 0,
      },
      disabled: false,
      isLoadVcode: false,
      isVerify: false,
      btnloading: false
    };
  },
  computed: {
    disabledVcode() {
      return !this.formData.user || !this.formData.pass
    }
  },
  created() {
    //获取验证码图
    this.refreshVcode()
  },
  methods: {
    //图片验证登录
    submit(xpos, fun) {
      checkcapcode({
        capcode: this.options.capcode,
        username: this.formData.user,
        xpos: xpos + "",
      }).then((res) => {
        let {code, data} = res.data;
        this.id = data;
        if (code == 1) {
          this.isVerify = false;
          fun(false)
        } else {
          this.isVerify = true;
          fun(true)
        }
      }).catch(() => {
        this.isVerify = false;
        fun(false)
      });
    },
    // 刷新验证码
    refreshVcode() {
      get_loginPic().then((res) => {
        let {data} = res.data;
        this.options = data;
      });
    },
    login() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.btnloading = true
          userLogin({
            id: this.id,
            username: this.formData.user,
            password: this.formData.pass,
          }).then((res) => {
            let {data, code} = res.data;
            if (code === 0) {
              setCookie('token', data.token)
              getUserMenu().then((res) => {
                // 添加动态路由
                let menuDatas = arrCut(arrFilter(res.data.data))
                let menuKeys = menuDatas.map((item, index) => {
                  return 'menu' + index
                })
                setCookie('menuKeys', menuKeys.join(','))
                menuKeys.forEach((item, index) => {
                  setCookie(item, JSON.stringify(menuDatas[index]))
                })

                get_loginUserInfo().then((res) => {
                  let {data} = res.data
                  setCookie('userInfo', JSON.stringify(data))
                  this.$store.dispatch('app/setUserInfo', data)
                  this.$router.push("/");
                  this.btnloading = false
                }).catch(err => {
                  this.btnloading = false
                }).finally(() => {

                });
              });
            }
          }).catch(err => {
            this.btnloading = false
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url("../../assets/img/bg.png") no-repeat center;
    background-size: cover;

    .loginbox {
      padding: 40px;
      position: relative;
      display: flex;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .mange {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        margin: 25px 0;
      }

      .fom {
        width: 300px;

        .int {
          border-radius: 20px;
        }
      }

      .btn {
        width: 300px;
      }

      /deep/ .el-input__inner {
        width: 300px;
      }

      /deep/ .el-form-item:not(:first-child) {
        margin-top: 25px;
      }
    }
  }
</style>
